import {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import React, { PropsWithChildren } from 'react';

interface UpdateFormProps {
  roleCategoryEnum: Map<number, { text: string }>;
  echoRecord: API.UserInfo;
  children: any;
}
const CreateForm: React.FC<PropsWithChildren<UpdateFormProps>> = ({
  roleCategoryEnum,
  echoRecord,
  children,
}) => {
  const { configHandler } = useModel('User.model', (model) => ({
    configHandler: model.configHandler,
  }));

  return (
    <ModalForm<API.User_ConfigRole_Body>
      trigger={children}
      title="角色分配"
      initialValues={echoRecord}
      autoFocusFirstInput
      submitTimeout={2000}
      modalProps={{ destroyOnClose: true }}
      onFinish={async (values) => {
        const success = await configHandler({
          user_name: values.user_name,
          role_id: values.role_id,
        });
        console.log(values);
        return success; // 返回true MODEL FROM 自动销毁
      }}
    >
      <ProFormText
        name="user_name"
        label="用户名称"
        placeholder="请输入用户名称"
        rules={[
          { required: true, message: '名字不能为空' },
          { min: 2, max: 20, message: '名字字数在2-20之间' },
        ]}
      />
      <ProFormSelect
        name="role_id"
        label="角色分配"
        placeholder="请选择"
        valueEnum={roleCategoryEnum}
        rules={[{ required: true, message: '请选择角色' }]}
      />
    </ModalForm>
  );
};

export default CreateForm;
